<template>
  <div style="height: 100%" ref="echart"></div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  props: {
    // 父组件传的值
    chartData: {
      type: Object, // 包含x轴与y轴的值
      default() {
        // 默认值
        return {
          xData: [], // x轴内容
          series: [],
          yAxis: {},
          formatter: ''
        }
      }
    },
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
  },
  data() {
    return {
      echart: null,
      // 有坐标轴的配置
      axisOption: {
        legend: {
          textStyle: {
            // 图例文字
            color: '#4fcdff'
          },
          top: 10
        },
        grid: {
          // 偏移
          left: '10%',
          bottom: '30px',
          top: '35px',
          right: '20px'
        },
        tooltip: {
          // 悬浮提示
          trigger: 'axis',
          formatter: '',
          backgroundColor: 'rgba(9, 24, 48, 0.5)',
          borderColor: 'rgba(75, 253, 238, 0.4)',
          textStyle: {
            color: '#CFE3FC',
            fontSize: '12'
          }
        },
        xAxis: {
          type: 'category',
          // 轴的颜色
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          // 轴上文字颜色
          axisLabel: {
            interval: 'auto',
            show: true,
            inside: false,
            rotate: 0,
            showMinLabel: null,
            showMaxLabel: null,
            margin: 8,
            fontSize: 12,
            lineHeight: 18,
            color: '#4fcdff'
            // formatter: function(value) {
            //   var ret = ''
            //   var max = 5
            //   var val = value.length
            //   var rowN = Math.ceil(val / max)
            //   if (rowN > 1) {
            //     for (var i = 0; i < rowN; i++) {
            //       var temp = ''
            //       var start = i * max
            //       var end = start + max
            //       temp = value.substring(start, end) + '\n'
            //       ret += temp
            //     }
            //     return ret
            //   } else {
            //     return value
            //   }
            // }
          },
          data: []
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 1,
              type: 'solid'
            }
          },
          name: '',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          axisLabel: {
            color: '#4fcdff'
          }
        },
        color: [
          '#409eff',
          '#ff6600',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        series: []
      },
      // 无坐标轴的配置
      normalOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 20,
          top: 10,
          bottom: 10,
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 0
          }
        },

        color: [
          '#EAEA26',
          '#906BF9',
          '#FE5656',
          '#01E17E',
          '#3DD1F9',
          '#FFAD05',
          '#2AC9FD',
          '#76FBC0',
          '#35C96E',
          '#FCC708',
          '#48B188',
          '#5957C2',
          '#4A5D73'
        ],
        series: []
      },
      levels: null
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    }
  },
  methods: {
    initChart() {
      this.initChartData()
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
        this.getecharts()
      }
    },
    initChartData() {
      console.log(188, this.chartData)
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
        this.axisOption.tooltip.formatter = this.chartData.formatter
      } else {
        this.normalOption.series = this.chartData.series
      }
    },
    resizeChart() {
      // 浏览器界面改变大小echart自适应
      this.echart ? this.echart.resize() : ''
    },
    getecharts: function() {
      const that = this
      this.echart.on('click', function(params) {
        this.levels = params.name
        that.$emit('echartDetail', this.levels)
      })
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed() {
    // 销毁
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>

<style lang="scss" scoped></style>
